import React, { Component } from 'react';
import { Button, Grid, Select } from '@alifd/next';
import {
    FormBinderWrapper as IceFormBinderWrapper,
    FormBinder as IceFormBinder,
    FormError as IceFormError,
} from '@icedesign/form-binder';
import cloneDeep from 'lodash/cloneDeep';

import './SearchFilter.scss';

const { Row, Col } = Grid;

const userDatas = [
    { label: '何玲', value: '10000028061339' },
    { label: '李慧萍', value: '10000028061349' },
    { label: '吴小湾', value: '10000028061373' },
    { label: '徐伟洪', value: '10000028061391' },
    { label: '谢曼雪', value: '10000028061405' },
    { label: '廖金燕', value: '10000028061450' },
]

const roleDatas = [
    {
      value: "1",
      label: "管理员"
    },
    {
      value: "10000002530003",
      label: "总经理"
    },
    {
      value: "10000002530011",
      label: "出纳"
    },
    {
      value: "10000025190138",
      label: "业务总监"
    },
    {
      value: "10000025190139",
      label: "项目部经理"
    },
    {
      value: "10000025190141",
      label: "信贷经理A"
    },
    {
      value: "10000025190142",
      label: "风控经理"
    }
  ]

export default class SearchFilter extends Component {
    static displayName = 'SearchFilter';

    initFields = {
        base: {
          user: '',
          role: ''
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            value: cloneDeep(this.initFields),
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.refs.form.validateAll((errors, values) => {
            if (errors) {
                console.log({ errors });
                return;
            }
            let _values = {
                user: values.user,
                group: values.role
            }
            this.props.onRefresh(_values);
        });
    };

    handleReset = () => {
        this.setState({
            value: Object.assign(
                {},
                this.initFields.base
            )
        },
        () => {
            this.props.onRefresh(this.state.value);
        })
    }

    renderSelect = () => {
        return (
          <Col xs="12" l="8">
            <div className="form-item">
              <span className="form-label">用户：</span>
              <IceFormBinder name="user" message="请选择">
                <Select  
                    dataSource={userDatas}
                    style={{ width: '100%' }} 
                />
              </IceFormBinder>
            </div>
            <div className="form-item">
              <span className="form-label">角色：</span>
              <IceFormBinder name="role" message="请选择">
                <Select  
                    dataSource={roleDatas}
                    style={{ width: '100%' }} 
                />
              </IceFormBinder>
            </div>
          </Col>
        );
    };

    formChange = (values) => {
        console.log(values)
        this.props.selectUser(values)
    }

    render() {
        return (
            <div className="form-container">
                <IceFormBinderWrapper
                    ref="form"
                    onChange={this.formChange}
                    value={this.state.value}
                >
                    <Row wrap gutter={40}>
                        {this.renderSelect()}
                    </Row>
                    <div className="buttons">
                        <Button
                            type="primary"
                            style={{ marginRight: '10px' }}
                            onClick={this.handleSubmit}
                        >
                            搜索
                        </Button>
                        <Button type="normal" onClick={this.handleReset}>重置</Button>
                    </div>
                </IceFormBinderWrapper>
            </div>
        )
    }
}